<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      
    }
  },

  computed: {
    ...mapGetters(['filteredList'])
  },

  methods: {
    gotoDetails(id) {
      this.$router.push('/details?id=' + id)
    }
  }
}
</script>

<template>
  <div class="top10-container">
    <ul>
      <li v-for="top in filteredList(10)" @click="gotoDetails(top.id)">
        <div class="image">
          <img :src="top.img" alt="">
        </div>
        <div class="content">
          <h1>{{top.name}}</h1>
          <p>{{top.all_click}}浏览 {{top.favorites}}收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
@import '@/assets/ellipsis.scss';
.top10-container {
  ul {
    display: flex;
    flex-wrap: wrap;
    padding-left: .1rem;
    padding-top: .1rem;
    li {
      width: 50%;
      display: flex;
      flex-direction: column;
      padding-right: .1rem;
      margin-bottom: .1rem;
      > div.image {
        height: 0;
        font-size: 0;
        padding-bottom: 66.666667%;
        img {
          width: 100%;
        }
      }
      > div.content {
        height: .6rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fff;
        h1 {
          font-size: .18rem;
          color: #000000;
        }
        p {
          width: 100%;
          @include ellipse(); 
        }
      }
    }
  }
} 
</style>
